在 Visual Studio 自定義 HTML IntelliSense

TLDR

• 透過編輯 SchemaCatalog.xml 並引用自定義 XSD 檔案，可擴充 Visual Studio 的 HTML IntelliSense 功能。
• 此設定為全域設定，無法針對單一專案進行隔離。
• 更新 Visual Studio 會重置 SchemaCatalog.xml，導致自定義設定失效。
• <xsd:element /> 用於指定觸發的 HTML 標籤，使用 ___all___ 可對所有標籤生效。
• <xsd:attributeGroup /> 可將多個自定義屬性封裝為群組，方便重複引用。
• <xsd:restriction /> 配合 <xsd:enumeration /> 可限制並列舉屬性的有效值。

擴充 HTML IntelliSense 的設定方法

當專案使用大量自定義 HTML 屬性（如 data-*）進行 JavaScript 邏輯綁定時，為了避免拼字錯誤或遺漏屬性，可以透過修改 Visual Studio 的 Schema 設定來啟用自動補全。

什麼情況下會遇到問題

當你希望在 Visual Studio 的 HTML 編輯器中，針對專案特有的自定義屬性獲得 IntelliSense 提示時，必須手動修改 IDE 的設定檔。

設定步驟

1. 找到 SchemaCatalog.xml 檔案，路徑通常位於：
   • Visual Studio 2019: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\Common7\IDE\Extensions\Microsoft\Web Tools\Languages\Schemas\HTML\
   • Visual Studio 2022: C:\Program Files\Microsoft Visual Studio\2022\Community\Common7\IDE\Extensions\Microsoft\Web Tools\Languages\Schemas\HTML\
2. 在該檔案中新增 <schema /> 節點以引用自定義的 XSD 檔案：

   <schema File="Wing.xsd" FriendlyName="Wing" IsSupplemental="true" CustomPrefix="data-" />

   • File: 自定義的 XSD 檔名。
   • IsSupplemental: 必須設為 true 才能生效。
   • CustomPrefix: 設定觸發 IntelliSense 的前綴詞（如 data- 或 ng-）。
3. 在同目錄下建立對應的 XSD 檔案。
4. 重啟 Visual Studio 即可生效。

WARNING

此設定為全域生效，且每次更新 Visual Studio 時，SchemaCatalog.xml 會被重置，導致設定失效。若不需要某些內建的提示（如 AngularJS 或 Aria），可透過註解掉該 XML 引用來關閉。

XSD 檔案結構與實作

XSD 檔案定義了哪些 HTML 標籤可以觸發 IntelliSense，以及這些標籤對應的屬性與值。

什麼情況下需要定義 XSD

當你需要為特定的 HTML 標籤（如 input、button）綁定一組自定義屬性，並希望在輸入屬性值時能有選項清單供選擇。

核心節點說明

• <xsd:element />: 設定觸發條件。name 屬性填入 HTML 標籤名稱，若填入 ___all___ 則對所有標籤生效。
• <xsd:attribute />: 定義自定義屬性名稱。
• <xsd:attributeGroup />: 將多個屬性定義成群組，方便在不同標籤中重複引用。
• <xsd:restriction />: 限制屬性值的輸入範圍，搭配 <xsd:enumeration /> 可列舉出允許的選項。

實作範例

以下為一個定義了多種 data-* 屬性的 XSD 結構範例：

<?xml version="1.0" encoding="utf-8" ?>
<xsd:schema
  xmlns:xsd="http://www.w3.org/2001/XMLSchema"
  xmlns:vs="http://schemas.microsoft.com/Visual-Studio-Intellisense"
  vs:ishtmlschema="true">

  <xsd:attributeGroup name="buttonAttributeGroup">
    <xsd:attribute name="data-action-url" />
    <xsd:attribute name="data-action-ignore-error">
      <xsd:simpleType>
        <xsd:restriction base="xsd:NMTOKEN">
          <xsd:enumeration value="true" />
        </xsd:restriction>
      </xsd:simpleType>
    </xsd:attribute>
  </xsd:attributeGroup>

  <xsd:element name="button">
    <xsd:complexType>
      <xsd:attributeGroup ref="buttonAttributeGroup" />
    </xsd:complexType>
  </xsd:element>
</xsd:schema>

執行結果：

• 輸入 data- 時會自動列出相關屬性。
• 選擇 data-action-ignore-error 後，編輯器會提示可選值 true。



TIP

此方法特別適用於使用 Unobtrusive JavaScript 的專案，透過在 HTML 中定義自定義屬性來綁定事件，能大幅提升開發時的屬性輸入效率與準確度。

異動歷程

• 2022-11-11 初版文件建立。